<template>
  <div class="tw-libinput">
      <van-field :class="`xinput x${_uid}`"
        :label="label"
        :placeholder="placeholder"
        :type="texttype"
        :maxlength="maxlength"
        :border="border"
        :clearable="clearable"
        :autosize="autosize"
        :center="center"
        :disabled="disabled"
        :rows="rows"
        :colon="colon"
        :autofocus="autofocus"
        :show-word-limit="showWordLimit"
        @blur="changeValue"
        :input-align="inputalign"
        :required="required"
        v-model="val">
        <!-- <template slot="label" v-if="prependval">{{prependval}}</template>
        <template slot="button" v-if="appendval">{{appendval}}</template>
        <i slot="left-icon" :class="prefixcls" v-if="prefixcls"></i>
        <i slot="right-icon" :class="suffixcls" v-if="suffixcls"></i> -->
      </van-field>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'libinput',

  props,

  data() {
    return {
      val: ''
    }
  },

  methods: {
    changeValue () {
      console.log('this', this.val)
      this.$emit('input', this.val)
      this.$emit('change', this.val)
    },

    setStyle () {
      let style = ''
      // `
      //   .el-input.x${this._uid} .el-input__inner {
      //     color: ${this.color};
      //     background-color: ${this.bgColor};
      //     border-color: ${this.borderColor};
      //   }
      //   .el-input.x${this._uid}.is-active .el-input__inner, .x${this._uid} .el-input__inner:focus {
      //     border-color: ${this.focusBorderColor};
      //   }
      // `

      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/\n/g, '')

      document.head.appendChild(styleEl)
    },

    // setValFromDefault () {
    //   this.val = this.default
    //   this.changeValue()
    // },

    // init (reset) {
    //   const initValue = this.value === true ? '' : this.value

    //   if ([undefined, ''].includes(initValue) || reset) {
    //     if (this.default) {
    //       this.setValFromDefault()
    //     } else if (this.selectedFirst && this.options.length > 0) {
    //       this.val = this.multiple ? [this.options[0].value] : this.options[0].value
    //       this.changeValue()
    //     } else {
    //       this.val = this.multiple ? [] : ''
    //     }
    //   } else {
    //     this.val = initValue
    //   }
    // },
    querySearch (queryString, cb) {
      let restaurants = this.list
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect(item) {
      this.$emit('input', this.val)
      this.$emit('change', this.val)
    }
  },

  computed: {
    style () {
      return {
        color: this.color,
        bgColor: this.bgColor,
        borderColor: this.borderColor,
        focusBorderColor: this.focusBorderColor
      }
    }
  },

  mounted () {
    this.setStyle()
  },

  watch: {
    value () {
      this.val = this.value
    },

    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
